<template>
  <div class="pages-container">
    <a-row style="padding: 20px">
      <a-row>
        <a-col :span="18" :offset="3">
          <a-divider orientation="left">
            角色设置
          </a-divider>
          <a-row type="flex" align="middle" style="margin: 30px 0">
            <a-col :span="3" style="text-align: right">角色名称</a-col>
            <a-col :span="10" :offset="1">
              <a-input v-model="data.title"></a-input>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="9" :offset="3">
          <a-row>
            <a-divider orientation="left">
              权限设置
            </a-divider>
            <a-tree
                ref="tree"
                class="roleTree"
                :tree-data="treeData"
                :checkable="true"
                :defaultExpandAll="true"
                @select="nodeClick"
                @check="nodeCheck"
                :checkedKeys="checkedKeys">
            </a-tree>
          </a-row>
        </a-col>
        <a-col :span="8" :offset="1" v-if="pageAuthIndex !== -1 && pageAuthSwitch">
          <a-divider orientation="left">
            按钮权限({{ pageAuthIndex }})
          </a-divider>
          <div>
            <label style="float: left" v-for="(item, index) in pageAuth[pageAuthIndex]" :key="index">
              <template>
                <span style="margin: 10px">{{ item.buttonDesc }}</span>
                <a-switch style="margin-right: 30px" v-model="item.isHide"></a-switch>
              </template>
            </label>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-row style="margin-top: 50px">
          <a-col :span="4" :offset="3">
            <a-button type="primary" block @click="submit">
              保存
            </a-button>
          </a-col>
        </a-row>
      </a-row>
    </a-row>
  </div>
</template>

<script>
import config from "../../tools/config";
import routerTool from "@/router/vouter.tools";

export default {
  name: "CoinList.vue",
  data() {
    return {
      // 公用配置
      id: '',
      Config: {},
      checkedKeys: [],
      treeData: [],
      data: {
        name: "",
        desc: "",
      },
      pageAuthSwitch: true,   // 按钮权限开关
      pageAuthIndex: -1,
      pageAuth: {
        "用户列表": [
          {buttonName: "UserStop", buttonDesc: "用户列表封禁", pkey: "用户列表", isHide: true},
        ],
      },
    };
  },
  created() {
    this.id = this.$route.query.id || ''
    this.Config = config
    // 获取树数据
    this.treeData = routerTool.getRoleAuthTree()
    this.getData()
  },
  methods: {
    /**
     * 请求Table数据
     * @param pages
     */
    getData() {
      let data = {}
      if (this.id) {
        data = {id: this.id}
      } else {
        return
      }
      this.Http.get('/admin/group/detail', data).then(res => {
        if (res.code === 1) {
          this.data = res.data
          this.checkedKeys = res.data.menu.split(',')
          // 处理按钮权限
          if (res.data.button) {
            let _pageAuth = {}
            Object.values(this.pageAuth).forEach((item, index) => {
              _pageAuth[Object.keys(this.pageAuth)[index]] = Object.values(this.pageAuth)[index].map((button) => {
                let _button = button
                let _is = false
                let _isObject = {}
                res.data.button[Object.keys(this.pageAuth)[index]].forEach((resButton) => {
                  if (button.buttonName === resButton.buttonName) {
                    _is = true
                    _isObject = resButton
                  }
                })
                if (_is) {
                  _button.isHide = _isObject.isHide
                }
                return _button
              })
            })
            this.pageAuth = _pageAuth
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {
      })
    },

    /**
     * 选择节点
     */
    nodeClick(selectedKeys, e) {
      if (!e.node.dataRef.children || e.node.dataRef.children.length === 0) {
        this.pageAuthIndex = e.node.dataRef.title
      } else {
        this.pageAuthIndex = -1
      }
    },

    /**
     * 选择多选框后触发
     * @param checkedKeys
     */
    nodeCheck(checkedKeys) {
      this.checkedKeys = checkedKeys
    },


    submit() {
      let url, data
      if (this.id) {
        url = "/admin/group/update"
        data = {
          id: this.data.id,
          title: this.data.title,
          menu: this.checkedKeys.join(","),
          button: this.pageAuth,
        }
      } else {
        url = '/admin/group/create'
        data = {
          title: this.data.title,
          menu: this.checkedKeys.join(","),
          button: this.pageAuth,
        }
      }
      this.Http.post(url, data).then(res => {
        if (res.code == 1) {
          this.getData()
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  },
}
</script>

<style scoped>
.roleTree {
  padding-left: 10%;
}
</style>
